<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select showcase</title>
    <style>
        .custom {
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            appearance: none;
            padding: 8px 16px;
            background-color: #088;
            color: #fff;
        }
    </style>
</head>
<body>
    <p>Basic select:</p>
    <p>
        <select onchange="document.getElementById('a-value').textContent = this.value">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
            <option value="four">Four</option>
            <option value="five">Five</option>
        </select>
        Value: <span id="a-value">?</span>
    </p>

    <p>Basic select with no values:</p>
    <p>
        <select>
            <option value="">One</option>
            <option value="">Two</option>
            <option value="">Three</option>
            <option value="">Four</option>
            <option value="">Five</option>
        </select>
    </p>

    <p>Basic select with separators:</p>
    <p>
        <select onchange="document.getElementById('b-value').textContent = this.value" style="width: 50%;">
            <option value="one">One</option>
            <option value="two">Two</option>
            <hr>
            <option value="three">Three</option>
            <option value="four">Four</option>
            <hr>
            <option value="five">Five</option>
            <option value="six">Six</option>
        </select>
        Value: <span id="b-value">?</span>
    </p>

    <p>Basic select with custom styling:</p>
    <p>
        <select class="custom">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
            <option value="four">Four</option>
            <option value="five">Five</option>
        </select>
    </p>

    <p>Basic select with option groups and separators:</p>
    <p>
        <select onchange="document.getElementById('c-value').textContent = this.value">
            <optgroup label="8.01 Physics I: Classical Mechanics">
                <option value="8.01.1">Lecture 01: Powers of Ten
                <option value="8.01.2">Lecture 02: 1D Kinematics
                <option value="8.01.3">Lecture 03: Vectors
                <option value="8.01.4">Lecture 04: Random
            <optgroup label="8.02 Electricity and Magnetism (disabled)" disabled>
                <option value="8.02.1">Lecture 01: What holds our world together?
                <option value="8.02.2">Lecture 02: Electric Field
                <option value="8.02.3">Lecture 03: Electric Flux
                <option value="8.02.4">Lecture 04: Random
            <optgroup label="8.03 Physics III: Vibrations and Waves">
                <option value="8.03.1">Lecture 01: Periodic Phenomenon
                <option value="8.03.2">Lecture 02: Beats
                <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
                <option value="8.03.4">Lecture 04: Random
        </select>
        Value: <span id="c-value">?</span>
    </p>
</body>
</html>
